<template>
<svg version="1.1" id="House" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
  <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="25.278" y1="479.7732" x2="221.489" y2="411.5112" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#E2EDF2" />
    <stop offset="1" style="stop-color:#9FC7E2" />
  </linearGradient>
  <path style="fill:url(#SVGID_1_);" d="M44.912,72.683c-4.814-9.951-0.651-21.92,9.3-26.733c3.248-1.571,6.707-2.17,10.066-1.94
  c3.168-7.043,8.73-13.055,16.225-16.681c16.942-8.197,37.321-1.107,45.518,15.835c1.981,4.095,3.062,8.391,3.333,12.666
  c7.562-0.252,14.923,3.868,18.431,11.117c4.746,9.809,0.642,21.607-9.168,26.353c-8.908,4.31-19.44,1.303-24.856-6.63
  c-1.138,0.73-2.326,1.406-3.574,2.011c-13.394,6.48-28.931,3.399-38.904-6.545C61.406,86.68,49.669,82.513,44.912,72.683z" />
  <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="44.1546" y1="496.9826" x2="73.0446" y2="486.9286" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#E2EDF2" />
    <stop offset="1" style="stop-color:#9FC7E2" />
  </linearGradient>
  <circle style="fill:url(#SVGID_2_);" cx="49.945" cy="19.511" r="16.727" />
  <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="112.1688" y1="402.6902" x2="132.3288" y2="382.5402" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#816965" />
    <stop offset="1" style="stop-color:#654E48" />
  </linearGradient>
  <path style="fill:url(#SVGID_3_);" d="M149.315,171.132h-40.343c-5.709,0-10.337-4.628-10.337-10.337V96.446
  c0-5.709,4.628-10.337,10.337-10.337h40.343c5.709,0,10.337,4.628,10.337,10.337v64.349
  C159.653,166.504,155.025,171.132,149.315,171.132z" />
  <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="75.8086" y1="141.8" x2="75.8086" y2="5.04" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#FFE7A5" />
    <stop offset="0.966" style="stop-color:#FFBF5C" />
  </linearGradient>
  <rect x="16.063" y="354.612" style="fill:url(#SVGID_4_);" width="120.471" height="154.604" />
  <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="74.6335" y1="177.22" x2="74.6335" y2="127.48" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#FF5D00" />
    <stop offset="1" style="stop-color:#D54003" />
  </linearGradient>
  <path style="fill:url(#SVGID_5_);" d="M141.553,387.739H16.333c-5.131,0-8.804-4.954-7.315-9.865l12.426-40.931
  c0.978-3.222,3.948-5.423,7.315-5.423h112.795V387.739z" />
  <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="433.8086" y1="141.8" x2="433.8086" y2="5.04" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#FFE7A5" />
    <stop offset="0.966" style="stop-color:#FFBF5C" />
  </linearGradient>
  <rect x="375.467" y="354.612" style="fill:url(#SVGID_6_);" width="120.471" height="154.604" />

  <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="434.9837" y1="177.22" x2="434.9837" y2="127.48" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#FF5D00" />
    <stop offset="1" style="stop-color:#D54003" />
  </linearGradient>
  <path style="fill:url(#SVGID_8_);" d="M370.447,387.739h125.22c5.131,0,8.804-4.954,7.315-9.865l-12.426-40.931
  c-0.978-3.222-3.948-5.423-7.315-5.423H370.447V387.739z" />
  <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="254.8286" y1="240.99" x2="254.8286" y2="-94.5" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#FFE7A5" />
    <stop offset="0.966" style="stop-color:#FFBF5C" />
    <stop offset="1" style="stop-color:#DB9E36" />
  </linearGradient>
  <polygon style="fill:url(#SVGID_9_);" points="415.061,189.342 415.061,509.211 96.979,509.211 96.979,189.342 256,33.433 " />

  <path style="fill:#503837;" d="M181.863,417.879h-49.615c-3.129,0-5.665-2.536-5.665-5.665v-68.815c0-3.129,2.537-5.665,5.665-5.665
  h49.615c3.129,0,5.665,2.537,5.665,5.665v68.815C187.529,415.343,184.992,417.879,181.863,417.879z" />
  <path style="fill:#FFFFFF;" d="M181.863,425.899h-49.615c-7.545,0-13.684-6.139-13.684-13.684v-68.815
  c0-7.545,6.139-13.684,13.684-13.684h49.615c7.545,0,13.684,6.139,13.684,13.684v68.815
  C195.548,419.76,189.409,425.899,181.863,425.899z M134.603,409.86h44.906v-64.107h-44.906V409.86z" />

  <path style="fill:#503837;" d="M381.697,417.879h-49.615c-3.129,0-5.665-2.536-5.665-5.665v-68.815c0-3.129,2.536-5.665,5.665-5.665
  h49.615c3.129,0,5.665,2.537,5.665,5.665v68.815C387.363,415.343,384.826,417.879,381.697,417.879z" />
  <path style="fill:#FFFFFF;" d="M381.698,425.899h-49.615c-7.545,0-13.684-6.139-13.684-13.684v-68.815
  c0-7.545,6.139-13.684,13.684-13.684h49.615c7.545,0,13.684,6.139,13.684,13.684v68.815
  C395.382,419.76,389.243,425.899,381.698,425.899z M334.436,409.86h44.906v-64.107h-44.906V409.86z" />
  <path style="fill:#816965;" d="M222.877,509.209V335.44c0-7.665,6.213-13.878,13.878-13.878h38.536
  c7.665,0,13.878,6.213,13.878,13.878v173.769H222.877z" />
  <path style="fill:#503837;" d="M297.376,509.209H280.96V340.172c0-5.72-4.68-10.401-10.401-10.401h-29.074
  c-5.744,0-10.401,4.656-10.401,10.401v169.037h-16.415V329.316c0-8.815,7.146-15.961,15.961-15.961h50.784
  c8.815,0,15.961,7.146,15.961,15.961v179.893H297.376z" />
  <circle style="fill:#FFFFFF;" cx="244.264" cy="386.788" r="7.484" />
  <rect x="96.969" y="465.415" style="fill:#654E48;" width="318.103" height="43.792" />
  <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="20.1112" y1="53.3485" x2="77.5672" y2="-4.1015" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#9EB644" />
    <stop offset="1" style="stop-color:#738611" />
  </linearGradient>
  <path style="fill:url(#SVGID_14_);" d="M93.486,492.097c0,6.044-1.143,11.811-3.231,17.112H3.231C1.143,503.908,0,498.141,0,492.097
  c0-5.885,1.085-11.511,3.072-16.694c6.719-17.579,23.739-30.049,43.672-30.049s36.952,12.471,43.672,30.049
  C92.402,480.587,93.486,486.213,93.486,492.097z" />
  <linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="70.13" y1="40.7114" x2="111.81" y2="-0.9687" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#9EB644" />
    <stop offset="1" style="stop-color:#738611" />
  </linearGradient>
  <path style="fill:url(#SVGID_15_);" d="M123.628,496.797c0,4.384-0.829,8.567-2.343,12.413H58.156
  c-1.514-3.845-2.343-8.029-2.343-12.413c0-4.269,0.787-8.35,2.229-12.11c4.874-12.752,17.22-21.798,31.68-21.798
  s26.806,9.046,31.68,21.798C122.841,488.446,123.628,492.528,123.628,496.797z" />
  <linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="424.9272" y1="60.9786" x2="491.8972" y2="-6.0014" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#9EB644" />
    <stop offset="1" style="stop-color:#738611" />
  </linearGradient>
  <path style="fill:url(#SVGID_16_);" d="M512,489.262c0,7.045-1.333,13.768-3.766,19.947H406.79
  c-2.432-6.178-3.766-12.902-3.766-19.947c0-6.86,1.265-13.417,3.581-19.46c7.833-20.491,27.672-35.028,50.907-35.028
  c23.235,0,43.074,14.537,50.907,35.028C510.735,475.845,512,482.402,512,489.262z" />
  <linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="327.6079" y1="281.3493" x2="181.0779" y2="427.8793" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#FF5D00;stop-opacity:0" />
    <stop offset="1" style="stop-color:#D54003" />
  </linearGradient>

  <path style="fill:#654E48;" d="M391.75,218.606H124.372c-6.376,0-11.562,5.187-11.562,11.562v51.333h8.031v-51.333
  c0-1.947,1.584-3.531,3.531-3.531h15.994v54.863h8.031v-54.863h23.859v54.863h8.031v-54.863h23.859v54.863h8.031v-54.863h23.859
  v54.863h8.031v-54.863h23.86v54.863h8.031v-54.863h23.859v54.863h8.031v-54.863h23.859v54.863h8.031v-54.863h23.859v54.863h8.031
  v-54.863h20.118c1.947,0,3.531,1.584,3.531,3.531v51.333h8.031v-51.333C403.312,223.793,398.125,218.606,391.75,218.606z" />
  <linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="254.8086" y1="245.14" x2="254.8086" y2="192.8" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#FF5D00" />
    <stop offset="1" style="stop-color:#D54003" />
  </linearGradient>
  <path style="fill:url(#SVGID_18_);" d="M421.654,273.168v25.75c0,3.827-3.102,6.929-6.929,6.929H97.275
  c-3.827,0-6.929-3.102-6.929-6.929v-25.75c0-3.827,3.102-6.929,6.929-6.929h317.45C418.552,266.239,421.654,269.341,421.654,273.168
  z" />
  <linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="254.8086" y1="368.7599" x2="254.8086" y2="191.07" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#FF5D00" />
    <stop offset="1" style="stop-color:#D54003" />
  </linearGradient>
  <path style="fill:url(#SVGID_19_);" d="M472.01,217.228L266.626,11.776c-5.854-5.854-15.346-5.854-21.2,0L39.99,217.211
  c-3.83,3.83-3.83,10.039,0,13.869l8.755,8.755c3.83,3.83,10.039,3.83,13.869,0l190.62-190.62c1.541-1.541,4.04-1.541,5.581,0
  l190.57,190.636c3.83,3.83,10.039,3.83,13.869,0l8.755-8.755C475.84,227.267,475.84,221.058,472.01,217.228z" />
  <linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="407.64" y1="337.2113" x2="300.24" y2="444.6093" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
    <stop offset="0" style="stop-color:#FF5D00;stop-opacity:0" />
    <stop offset="1" style="stop-color:#D54003" />
  </linearGradient>

  <path style="fill:#654E48;" d="M294.433,193.67h-76.865c-3.031,0-5.487-2.457-5.487-5.487v-38.433
  c0-24.257,19.664-43.921,43.921-43.921l0,0c24.257,0,43.921,19.664,43.921,43.921v38.433
  C299.921,191.213,297.463,193.67,294.433,193.67z" />
  <path style="fill:#FFFFFF;" d="M256,97.49c-28.816,0-52.259,23.444-52.259,52.259v38.432c0,7.625,6.202,13.827,13.827,13.827h76.865
  c7.625,0,13.827-6.202,13.827-13.827v-38.432C308.259,120.933,284.817,97.49,256,97.49z M291.293,145.302H264.34v-30.137
  C278.542,118.591,289.445,130.555,291.293,145.302z M247.66,115.165v30.137h-26.953C222.555,130.555,233.457,118.591,247.66,115.165
  z M220.419,161.981h27.241v23.35h-27.241V161.981z M264.34,185.331v-23.35h27.241v23.35H264.34z" />

</svg>
</template>

<script setup>

import { TimelineMax, Back, Power2, Bounce } from "gsap"
import { onMounted } from 'vue'
function animateFun() {
  // another timeline
  const tl2 = new TimelineMax();
  // Smoke
  tl2
  .from(
      "#House > path:nth-child(2)",
      1.5,
      {
        scaleX: 0,
        scaleY: 0,
        transformOrigin: "bottom-right",
        ease: Back.easeOut
      },
      0,
      "houseTimeline"
    )
    .from("#House > circle:nth-child(4)", 1.5, {
      scaleX: 0,
      scaleY: 0,
      transformOrigin: "bottom-right",
      ease: Back.easeOut
    })
    .staggerFromTo(
      ["#House > circle:nth-child(4)", "#House > path:nth-child(2)"],
      1,
      { opacity: 1 },
      { opacity: 0 },
      0.3
    )
    .repeat(5);

  const tl = new TimelineMax();
  tl
    // Ground
    .from("#House > rect:nth-child(24)", 1, {
      scaleX: 0,
      transformOrigin: "center",
      ease: Power2.easeOut
    })
    // House
    .from("#House > polygon", 1, {
      scaleY: 0,
      transformOrigin: "bottom",
      ease: Bounce.easeOut
    })
    // Roof
    .from("#House > path:nth-child(36)", 1, {
      scaleX: 0,
      scaleY: 0,
      transformOrigin: "top",
      ease: Bounce.easeOut
    })
    // Balcony
    .staggerFrom(
      ["#House > path:nth-child(34)", "#House > path:nth-child(32)"],
      0.8,
      {
        scaleY: 0,
        transformOrigin: "bottom",
        ease: Bounce.easeOut,
        stagger: 0.2
      },
      0,
      "scene1+=0.5"
    )
    // Side house
    .staggerFrom(
      ["#House > path:nth-child(10)", "#House > rect:nth-child(8)"],
      0.8,
      {
        scaleX: 0,
        transformOrigin: "right",
        ease: Bounce.easeOut,
        stagger: 0.2
      },
      0,
      "scene1+=0.5"
    )
    // Side house
    .staggerFrom(
      ["#House > path:nth-child(14)", "#House > rect:nth-child(12)"],
      0.8,
      {
        scaleX: 0,
        transformOrigin: "left",
        ease: Bounce.easeOut,
        stagger: 0.2
      },
      0,
      "scene1+=0.5"
    )
    // Windows
    .staggerFrom(
      [
        "#House > path:nth-child(39)",
        "#House > path:nth-child(38)",
        "#House > path:nth-child(17)",
        "#House > path:nth-child(18)",
        "#House > path:nth-child(19)",
        "#House > path:nth-child(20)"
      ],
      0.8,
      { scaleX: 0, transformOrigin: "top", ease: Bounce.easeOut, stagger: 0.2 }
    )
    // Tree
    .staggerFrom(
      [
        "#House > path:nth-child(28)",
        "#House > path:nth-child(26)",
        "#House > path:nth-child(30)"
      ],
      0.8,
      {
        scaleY: 0,
        transformOrigin: "bottom",
        ease: Power2.easeOut,
        stagger: 0.2
      }
    )
    // Door & chimney
    .staggerFrom(
      [
        "#House > path:nth-child(21)",
        "#House > path:nth-child(22)",
        "#House > path:nth-child(23)",
        "#House > circle:nth-child(23)",
        "#House > path:nth-child(6)"
      ],
      0.8,
      {
        scaleY: 0,
        transformOrigin: "bottom",
        ease: Power2.easeOut,
        stagger: 0.2
      }
    )
    .add("houseTimeline", "+=0.5");

  tl.add(tl2);
}

onMounted(animateFun)
</script>

<style lang="scss" scoped>
#House {
  margin: 0 auto;
  display: block;
  width: 500px;
  height: 500px;
}

</style>